<template>
  <manual-component
    v-if="caseType === 1"
    ref="manualComponent"
    v-model="value"
    :readonly="readonly"
    @create="create"
    @update="update"
    @updateNext="updateNext"
    @next="next"
  />
  <automated-component
    v-else-if="caseType === 3 || caseType === 4"
    ref="automatedComponent"
    v-model="value"
    :readonly="readonly"
    :debug-agent-id="debugAgentId"
    :debug-env="debugEnv"
    @create="create"
    @update="update"
    @next="next"
    @updateNext="updateNext"
  />
</template>

<script>
import ManualComponent from '@/components/functional_test/TestCase/manual.vue'
import AutomatedComponent from '@/components/functional_test/TestCase/automated.vue'
import { selectById as testCaseSelectById } from '@/api/functional_test/test_case_manage/test_case'

export default {
  components: { ManualComponent, AutomatedComponent },
  props: {
    value: {
      type: Object,
      default() {
        return {
          catalogId: 0, // 分类 id
          textMode: false // 文本模式编辑
        }
      }
    },
    readonly: { // 是否只读
      type: Boolean,
      default: false
    },
    debugEnv: { // 调试使用的环境
      type: String,
      default: ''
    },
    debugAgentId: { // 调试使用的环境
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      caseType: null, // 测试用例类型，1：手工用例，2：自动化用例
      textMode: false, // 文本模式编辑用哦
      tempId: -1 // 临时 id（新 step 的 id 需要设置成这个 id）
    }
  },
  created() {
  },
  methods: {
    // 装载数据
    loadData(id, caseType) {
      testCaseSelectById(id).then(response => {
        this.caseType = response.data.caseType
        this.$nextTick(() => {
          if (this.caseType === 1) { // 手工用例
            this.$refs.manualComponent.setElement(response.data)
          } else if (this.caseType === 3 || this.caseType === 4) { // 自动化用例、公共步骤
            this.$refs.automatedComponent.setElement(response.data, caseType)
          }
        })
      })
    },
    // 点击新增用例按钮时调用此方法
    add(caseType) {
      this.caseType = caseType
      if (caseType === 1) {
        this.$nextTick(() => {
          this.$refs.manualComponent.add()
        })
      } else if (caseType === 3 || caseType === 4) {
        this.$nextTick(() => {
          this.$refs.automatedComponent.add(caseType)
        })
      }
    },
    // 点击复制用例按钮时调用此方法
    copy(id) {
      // 根据要复制的用例 ID 查询用例信息
      testCaseSelectById(id).then(response => {
        this.caseType = response.data.caseType // 根据用例的 caseType 设置打开 手工用例组件 还是 自动化用例 组件

        // 由于复制是新建，所以清空 caseID 和 stepID
        response.data.id = undefined
        response.data.sort = undefined
        response.data.name = response.data.name + ' - copy'

        this.recursionStepHistoryToStepElement(0, response.data.steps) // 递归清除原 step 的 id、sort

        this.$nextTick(() => {
          if (this.caseType === 1) { // 手工用例
            this.$refs.manualComponent.setElement(response.data)
          } else if (this.caseType === 3 || this.caseType === 4) { // 自动化用例、公共步骤
            this.$refs.automatedComponent.setElement(response.data, this.caseType)
          }
        })
      })
    },
    /**
     * 递归清除原 step 的 id、sort
     * @param pid 父 id
     * @param steps step 列表
     */
    recursionStepHistoryToStepElement(pid, steps) {
      if (steps) {
        for (const step of steps) {
          step.id = this.tempId--
          step.parentId = pid
          step.sort = undefined

          if (step.childSteps.length > 0) {
            this.recursionStepHistoryToStepElement(step.id, step.childSteps) // 递归清除原 step 的 id、sort
          }
        }
      }
    },
    // tree：测试用例添加成功后回调此方法，继续向外回调
    create(elementInfo) {
      this.$emit('create', elementInfo)
    },
    // tree：测试用例修改成功后回调此方法，继续向外回调
    update(elementInfo) {
      this.$emit('update', elementInfo)
    },
    // tree：测试用例修改并继续成功后回调此方法，继续向外回调
    updateNext(elementInfo) {
      this.$emit('updateNext', elementInfo)
    },
    // tree：点击 next 成功后回调此方法，继续向外回调
    next() {
      this.$emit('next')
    }
  }
}
</script>
